<template>
  <el-dialog :visible.sync='visible' title="合并术语" fullscreen
             @open="openDialog"
             @close='closeDialog'>
  <el-row>
      <!-- 左侧穿梭框 原料框 -->
      <el-col :span="11">
        <div class="transfer-left">
          <div class="transfer-title">
            <span>原始冲突术语</span>
          </div>
          <!-- 内容区 -->
          <div class="transfer-main" :style="autoHeight">
            <div v-for="(conflictTerm, idx) in conflictTermList">
              <el-radio :disabled="nodeDisabled[conflictTerm.name]" style="display: block" v-model="leftCheckedValue" :label="conflictTerm.name" @change="leftCheckedType = 'name'">
                <span v-html="'正名: ' + conflictTerm.name"/>
              </el-radio>

              <div v-for="(propName, prop) in propMap" v-if="!prop.endsWith('synonym')">
                <el-radio :disabled="nodeDisabled[conflictTerm[prop]]" style="display: block" v-if="UTIL.isNotEmpty(conflictTerm[prop])" v-model="leftCheckedValue" :label="conflictTerm[prop]" @change="leftCheckedType = prop">
                  <span v-html="propName + ': ' + conflictTerm[prop]"/>
                </el-radio>
              </div>

              <div v-for="(explainItem) in conflictTerm.explanation">
                <el-radio :disabled="nodeDisabled[explainItem]" style="display: block" v-model="leftCheckedValue"
                          :label="explainItem" @change="leftCheckedType = 'explanationSynonym'">
                  <span v-html="'释义: ' + explainItem"/>
                </el-radio>
              </div>
              <div style="margin-left: 20px" v-for="(aliasTerm, innerIdx) in conflictTerm.termList">
                <el-radio v-model="leftCheckedValue" :disabled="nodeDisabled[aliasTerm.name]" :label="aliasTerm.name"
                          style="display: block" @change="leftCheckedType = 'nameSynonym'">
                  <span v-if="aliasTerm.type === 1">正名1: </span>
                  <span v-else-if="aliasTerm.type === 2">正名2: </span>
                  <span v-else-if="aliasTerm.type === 3">又称: </span>
                  <span v-else-if="aliasTerm.type === 4">曾称: </span>
                  <span v-else-if="aliasTerm.type === 5">旧称: </span>
                  <span v-else-if="aliasTerm.type === 6">通称: </span>
                  <span v-else-if="aliasTerm.type === 7">通称: </span>
                  <span v-else-if="aliasTerm.type === 8">全称: </span>
                  <span v-else-if="aliasTerm.type === 9">正名3: </span>
                  <span v-else>同义词: </span>
                  <span v-html="aliasTerm.name">同义词</span>
                </el-radio>

                <div v-for="(propName, prop) in propMap" v-if="!prop.endsWith('synonym')">
                  <el-radio :disabled="nodeDisabled[aliasTerm[prop]]" style="display: block"
                            v-if="UTIL.isNotEmpty(aliasTerm[prop])" v-model="leftCheckedValue" :label="aliasTerm[prop]"
                            @change="leftCheckedType = prop + 'Synonym'">
                    <span v-html="propName + ': ' + aliasTerm[prop]"/>
                  </el-radio>
                </div>
                <hr v-if="innerIdx < conflictTerm.termList.length -1"/>
              </div>
              <hr/>
            </div>
            <div>
              来源:<span v-if="conflictTermList.length > 0" v-html="conflictTermList[0].nameSource"></span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="2">
        <!-- 穿梭区 按钮框 -->
        <div class="transfer-center">
          <template>
            <p class="transfer-center-item">
              <el-button
                type="primary"
                icon="el-icon-arrow-right"
                title="应用左侧选中节点"
                @click="mergeToRight"
              ></el-button>
            </p>
            <p class="transfer-center-item">
              <el-button
                type="primary"
                icon="el-icon-arrow-left"
                title="重新合并"
                @click="redoMerge"
              ></el-button>
            </p>
          </template>
        </div>
      </el-col>
      <el-col :span="11">
        <!-- 右侧穿梭框 目标框 -->
        <div class="transfer-right">
          <div class="transfer-title">
            <span>合并后术语</span>
          </div>
          <!-- 内容区 -->
          <div class="transfer-main" :style="autoHeight">
            <div v-for="(mergedTerm, idx) in mergedTermList">
              <el-row type="flex" align="bottom">
              <el-col :span="20">

                <el-radio style="display: block" v-model="rightCheckedValue" :label="idx + '.name'" @change="rightCheckedType = 'name'">
                  正名:
                </el-radio>
                <div v-if="UTIL.isNotEmpty(mergedTerm.name)" style="margin-left: 50px">
                  <span v-html="mergedTerm.name"/>
                  <el-button title="删除" class="inline-button" circle size="small" icon="el-icon-close" type="danger" @click="mergedTerm.name = ''"></el-button>
                </div>

                <div v-for="(propName, prop) in propMap">
                  <el-radio style="display: block" v-model="rightCheckedValue" :label="idx + '.' + prop" @change="rightCheckedType = prop">
                    <span v-html="propName + ': '"/>
                  </el-radio>
                  <div v-for="(itemValue, itemIdx) in mergedTerm[prop]" style="margin-left: 50px">
                    <span v-html="itemValue"></span>
                    <el-button title="删除" class="inline-button" circle size="small" icon="el-icon-close" type="danger" @click="mergedTerm[prop].splice(itemIdx, 1)"></el-button>
                  </div>
                </div>

                <el-radio v-model="rightCheckedValue" :label="idx + '.explanation'" style="display: block"
                          @change="rightCheckedType = 'explanationSynonym'">
                  释义:
                </el-radio>
                <div v-for="(explainItem, explainIdx) in mergedTerm.explanation" v-if="UTIL.isNotEmpty(explainItem)"
                     style="margin-left: 50px">
                  <span v-html="explainItem"/>
                  <el-button circle class="inline-button" icon="el-icon-close" size="small" title="删除" type="danger"
                             @click="mergedTerm.explanation.splice(explainIdx, 1)"></el-button>
                </div>
              </el-col>
              <el-col :span="4">
                <el-button type="danger" plain @click="mergedTermList.splice(idx, 1)">删除术语</el-button>
              </el-col>
              </el-row>
              <hr/>
            </div>
            <el-button style="display: flex; margin: 10px auto; " icon="el-icon-plus" @click="addMergedTerm">新建入库术语</el-button>
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="dialog-footer" slot="footer">
      <el-button @click='visible = false'>取 消</el-button>
      <el-button @click="submit" type="primary">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'SolveBookTermConflictDialog',
    props: ['conflictTermList', 'termBookMetadataId'],
    data() {
      return {
        leftCheckedType: '',
        leftCheckedValue: '',
        rightCheckedType: '',
        rightCheckedValue: '',
        mergedTermList: [],
        propMap: {
          nameSynonym: '同义词',
          englishName: '英文名称',
          englishNameSynonym: '英文名称同义词',
          englishAbbr: '英文简称',
          englishAbbrSynonym: '英文简称同义词',
          frenchName: '法文名称',
          frenchNameSynonym: '法文名称同义词',
          russianName: '俄文名称',
          russianNameSynonym: '俄文名称同义词',
          germanName: '德文名称',
          germanNameSynonym: '德文名称同义词',
          japaneseName: '日文名称',
          japaneseNameSynonym: '日文名称同义词'
        },
        visible: false,
        nodeDisabled: {},
        mergedTermValueSet: [],
        autoHeight: {
          height: CONST.WORKSPACE_HEIGHT - 190 + 'px',
        },
      }
    },
    methods: {
      redoMerge(){
        this.openDialog()
      },
      mergeToRight(){
        if (!UTIL.isNotEmpty(this.leftCheckedValue) || !UTIL.isNotEmpty(this.rightCheckedValue)) {
          this.$message.warning("两侧必须选中相应节点才能赋值")
          return
        }
        if (this.leftCheckedType.replace('Synonym', '') !== this.rightCheckedType.replace('Synonym', '')) {
          // 英文名称, 英文简称 能相互赋值
          if (!this.leftCheckedType.startsWith('english')
            || !this.rightCheckedType.startsWith('english')) {
            this.$message.warning("左右侧选中节点数据不一致, 不能赋值")
            return
          }
        }
        // 名称/英法俄德日;
        let checkedMergedTerm = this.mergedTermList[this.rightCheckedValue.split(".")[0]]
        // 左侧选中名称/全称/曾称... 需要连带其它属性;
        if (this.leftCheckedType.replace('Synonym', '') === 'name') {
          // 查找左侧选中的所有名称节点;
          let leftCheckedNodeList = []
          for (let item of this.conflictTermList) {
            if (item.name === this.leftCheckedValue) {
              leftCheckedNodeList.push(item)
            }
            for (let innerItem of item.termList) {
              if (innerItem.name === this.leftCheckedValue) {
                leftCheckedNodeList.push(innerItem)
              }
            }
          }
          // 做为名称时, 把其它属性都作为相应的名称;
          if (this.rightCheckedType === 'name') {
            checkedMergedTerm.termBookMetadataId = leftCheckedNodeList[0].termBookMetadataId
            let xml_classifyList = []
            for (let leftCheckedNode of leftCheckedNodeList) {
              xml_classifyList.pushIfNotContains(leftCheckedNode.xmlClassify)
            }
            checkedMergedTerm.xmlClassify = xml_classifyList.join(";")
            checkedMergedTerm.name = this.leftCheckedValue
            this.mergedTermValueSet.push(this.leftCheckedValue)

            for (let leftCheckedNode of leftCheckedNodeList) {
              for (let propName in this.propMap) {
                if (UTIL.isNotEmpty(leftCheckedNode[propName])) {
                  if (this.mergedTermValueSet.indexOf(leftCheckedNode[propName]) === -1) {
                    checkedMergedTerm[propName].push(leftCheckedNode[propName])
                    this.mergedTermValueSet.push(leftCheckedNode[propName])
                  }
                }
              }
            }
          }
          // 做为右侧同义词时, 把选中其它属性都做为相应的同义词
          else if (this.rightCheckedType === 'nameSynonym') {
            checkedMergedTerm.nameSynonym.push(this.leftCheckedValue)
            this.mergedTermValueSet.push(this.leftCheckedValue)
            for (let leftCheckedNode of leftCheckedNodeList) {
              for (let propName in this.propMap) {
                if (UTIL.isNotEmpty(leftCheckedNode[propName])) {
                  if (this.mergedTermValueSet.indexOf(leftCheckedNode[propName]) === -1) {
                    checkedMergedTerm[propName + "Synonym"].push(leftCheckedNode[propName])
                    this.mergedTermValueSet.push(leftCheckedNode[propName])
                  }
                }
              }
            }
          }
          // 释义, 全部复制到右侧;
          for (let leftCheckedNode of leftCheckedNodeList) {
            if (leftCheckedNode.explanation) {
              for (let explainItem of leftCheckedNode.explanation) {
                if (this.mergedTermValueSet.indexOf(explainItem) === -1) {
                  checkedMergedTerm.explanation.push(explainItem)
                  this.mergedTermValueSet.push(explainItem)
                }
              }
            }
          }
        }
        else {
            checkedMergedTerm[this.rightCheckedValue.split(".")[1]].push(this.leftCheckedValue)
          this.mergedTermValueSet.push(this.leftCheckedValue)
        }
        this.leftCheckedValue = ''
        this.leftCheckedType = ''
      },
      addMergedTerm(){
        this.mergedTermList.push({
          name: '',
          nameSynonym: [],
          englishName: [],
          englishNameSynonym: [],
          englishAbbr: [],
          englishAbbrSynonym: [],
          frenchName: [],
          frenchNameSynonym: [],
          russianName: [],
          russianNameSynonym: [],
          germanName: [],
          germanNameSynonym: [],
          japaneseName: [],
          japaneseNameSynonym: [],
          explanation: []
        })
      },
      submit(){
        // 校验右侧合并后的数据, 正名是否都有;
        for(let term of this.mergedTermList) {
          if(!term.name) {
            this.$message.warning("合并后的术语, 名称不能为空")
            return
          }
        }
        // 深拷贝一份, 不影响页面展示数据;
        let mergedTermListBak = JSON.parse(JSON.stringify(this.mergedTermList))
        for (let mergedTerm of mergedTermListBak) {
          mergedTerm.synonym = mergedTerm.nameSynonym.join(";")
          mergedTerm.englishNameSynonym = mergedTerm.englishNameSynonym.join(";")
          mergedTerm.englishAbbrSynonym = mergedTerm.englishAbbrSynonym.join(";")
          mergedTerm.frenchNameSynonym = mergedTerm.frenchNameSynonym.join(";")
          mergedTerm.russianNameSynonym = mergedTerm.russianNameSynonym.join(";")
          mergedTerm.germanNameSynonym = mergedTerm.germanNameSynonym.join(";")
          mergedTerm.japaneseNameSynonym = mergedTerm.japaneseNameSynonym.join(";")
          mergedTerm.englishName = mergedTerm.englishName.join(";")
          mergedTerm.englishAbbr = mergedTerm.englishAbbr.join(";")
          mergedTerm.frenchName = mergedTerm.frenchName.join(";")
          mergedTerm.russianName = mergedTerm.russianName.join(";")
          mergedTerm.germanName = mergedTerm.germanName.join(";")
          mergedTerm.japaneseName = mergedTerm.japaneseName.join(";")
        }
        this.axios.post('/pmph/action/term/solveConflictBookTerm', {
          "mergedTermList": mergedTermListBak,
          "conflictConceptId": this.conflictTermList[0].conflictConceptId,
          "termBookMetadataId": this.termBookMetadataId
        }).then(() => {
          this.$emit('merged')
          this.closeDialog()
        })
      },
      openDialog(){
        this.leftCheckedValue = ''
        this.leftCheckedType = ''
        this.rightCheckedType = ''
        this.rightCheckedValue = ''
        this.mergedTermList = []
        this.addMergedTerm()
        this.nodeDisabled = {}
        // 页面初始化, 设置左侧disabled属性;
        for (let conflictTerm of this.conflictTermList) {
          this.$set(this.nodeDisabled,conflictTerm.name,false)
          for (let propName in this.propMap) {
            this.$set(this.nodeDisabled,conflictTerm[propName],false)
          }
          for (let aliasTerm of conflictTerm.termList) {
            for (let propName in this.propMap) {
              this.$set(this.nodeDisabled,aliasTerm[propName],false)
            }
          }
        }
      },
      closeDialog(){
        this.visible = false
      }
    },
    watch: {
      mergedTermList: {
        handler() {
          // 把nodeDisabled属性全置为false
          for (let prop in this.nodeDisabled) {
            this.nodeDisabled[prop] = false
          }
          // 重新组织valueSet;
          this.mergedTermValueSet = []
          for (let mergedTerm of this.mergedTermList) {
            this.mergedTermValueSet.push(mergedTerm.name)
            // 其它已用过的属性;
            for (let propName in mergedTerm) {
              if (Array.isArray(mergedTerm[propName])) {
                for (let item of mergedTerm[propName]) {
                  this.mergedTermValueSet.push(item)
                }
              }
            }
          }
          // 右侧已经引用的值, 设置disabled;
          for (let item of this.mergedTermValueSet) {
            this.nodeDisabled[item] = true
          }
        },
        deep: true
      },
    }
  }
</script>

<style scoped>
  /deep/ .el-dialog__body {
    padding: 0px 20px;
  }
  .el-radio {
    line-height: 30px;
  }
  .inline-button {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius:8px;
    padding: 0;
    margin: 0;
  }
  .transfer-main {
    overflow: auto;
    height: 470px;
    margin: 5px 0px 5px 10px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .transfer-left, .transfer-right {
    border: 1px solid #C9C9C9;
    border-radius: 5px;
  }
  .transfer-center {
    margin-top: 100px;
    text-align: center;
  }
  .transfer-title {
    background: #F0F8F8;
    font-size: 20px;
    padding: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

</style>
